<template>
  <div>
    <el-dialog
      v-model="editVisible"
      v-if="editVisible"
      width="50%"
      top="2%"
      @close="handleclose"
      :close-on-click-modal="false"
    >
      <el-form label-width="170px">
        <el-form-item label="Modelld：" v-if="is_admin">
          <el-radio v-model="Modelld_radio" :label="1">亚禾</el-radio>
          <el-radio v-model="Modelld_radio" :label="2">致联</el-radio>
          <div v-if="Modelld_radio == 1">
            <div class="displayflex">
              <el-select
                placeholder="请选择"
                v-model="brandId"
                class="width_accout"
                style="width: 120px"
                @change="handlebrand"
              >
                <el-option
                  v-for="item in brandList"
                  :key="item.brandId"
                  :label="item.brandName"
                  :value="item.brandId"
                ></el-option>
              </el-select>
              <el-select
                placeholder="请选择"
                :disabled="!brandId"
                v-model="modeBrand"
                class="width_accout"
                style="width: 120px; margin-left: 20px"
                @change="handleModelByBrand"
              >
                <el-option
                  v-for="item in listModelByBrand"
                  :key="item.id"
                  :label="item.modelName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div v-if="add_form.modelId">
              当前Modelld：{{ add_form.modelId }}
            </div>
            <!-- <el-input
              placeholder="请输入"
              v-model="add_form.modelId"
              :disabled="true"
              class="width_accout"
              style="margin-top:10px"
            ></el-input> -->
          </div>
          <div v-else>
            <el-input
              placeholder="请输入"
              v-model="add_form.modelId"
              class="width_accout"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="季节切换：">
          <el-select
            placeholder="请选择"
            v-model="add_form.seasonAuto"
            class="width_accout"
          >
            <el-option
              v-for="item in SeasonalSwitch"
              :key="item.paramValue"
              :label="item.paramName"
              :value="item.paramValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="夏季区：" v-if="add_form.seasonAuto == 0">
          <el-input
            placeholder="请输入"
            v-model="add_form.summerTime"
            class="width_accout"
          ></el-input>
          <span class="reminder">例如0610表示06月-10月</span>
        </el-form-item>
        <el-form-item label="冬季区：" v-if="add_form.seasonAuto == 0">
          <el-input
            placeholder="请输入"
            v-model="add_form.winterTime"
            class="width_accout"
          ></el-input>
          <span class="reminder">例如1203表示12月-03月</span>
        </el-form-item>
        <el-form-item label="红外关机与继电器间隔：" :required="true">
          <el-input
            placeholder="请输入"
            v-model="add_form.delayOff"
            class="width_accout"
          ></el-input
          ><span class="reminder">秒</span>
        </el-form-item>
        <el-form-item label="人体红外无人延时时间：" :required="true">
          <el-input
            placeholder="请输入"
            v-model="add_form.nobodyTime"
            class="width_accout"
          ></el-input
          ><span class="reminder">分钟</span>
        </el-form-item>
        <el-form-item label="启停探测阈值：" :required="true">
          <el-input
            placeholder="请输入"
            class="width_accout"
            v-model="add_form.acRunMA"
          ></el-input
          ><span class="reminder">毫安</span>
        </el-form-item>
        <el-form-item label="自控采集间隔：" :required="true">
          <el-input
            placeholder="请输入"
            class="width_accout"
            v-model="add_form.autoInterval"
          ></el-input
          ><span class="reminder">分钟</span>
        </el-form-item>
        <el-form-item label="遥控器密码：">
          <el-input
            placeholder="请输入"
            class="width_accout"
            v-model="add_form.rcPWD"
          ></el-input>
        </el-form-item>
        <el-form-item label="光敏电阻功能开关：" :required="true">
          <el-select
            placeholder="请选择"
            class="width_accout"
            v-model="add_form.ldrOn"
          >
            <el-option
              v-for="item in switchList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="蜂鸣功能开关：" :required="true">
          <el-select
            placeholder="请选择"
            class="width_accout"
            v-model="add_form.beepOn"
          >
            <el-option
              v-for="item in switchList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleclick">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive, getCurrentInstance } from "vue";
import { dictionaries } from "../assets/js/dictionaries";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "../api/api";
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    let { proxy } = getCurrentInstance();
    const is_admin = ref(false);
    proxy.$userinfo().then((res) => {
      if (res.roleList && res.roleList[0] == "ADMIN") {
        is_admin.value = true;
      }
    });
    const Modelld_radio = ref(1);
    const brandId = ref(null);
    const modeBrand = ref(null);
    const add_form = reactive(context.attrs.add_form);
    console.log(add_form);
    // 参考图片
    const editVisible = ref(context.attrs.editVisible);
    setTimeout(function () {
      if (add_form.yhModel && add_form.yhModel.id) {
        Modelld_radio.value = 1;
        brandId.value = add_form.yhModel.brandName;
        modeBrand.value = add_form.yhModel.modelName;
        getlistModelByBrand(add_form.yhModel.brandId);
      } else {
        Modelld_radio.value = 2;
      }
    }, 1000);
    // console.log(context.attrs.airList);
    const handleclose = () => {
      editVisible.value = false;
      context.emit("handleclose", editVisible.value);
    };
    // 季节切换
    const SeasonalSwitch = ref([]);
    dictionaries("SeasonalSwitch").then((res) => {
      Object.keys(res).forEach((item) => {
        res[item].paramValue = Number(res[item].paramValue);
      });
      SeasonalSwitch.value = res;
    });
    // 分控温度
    const CtlTemperature = ref([]);
    dictionaries("ControlTemperature").then((res) => {
      CtlTemperature.value = res;
    });
    console.log(add_form);
    const handleclick = () => {
      if (add_form.seasonAuto == 0) {
        if (!add_form.delayOff) {
          ElMessage.error("请输入红外关机与继电器间隔");
          return;
        } else if (!add_form.nobodyTime) {
          ElMessage.error("请输入人体红外无人延时时间");
          return;
        } else if (!add_form.acRunMA) {
          ElMessage.error("请输入启停探测阈值");
          return;
        } else if (!add_form.autoInterval) {
          ElMessage.error("请输入自控采集间隔");
          return;
        } else if (add_form.beepOn == null) {
          ElMessage.error("请选择蜂鸣器功能开关");
          return;
        } else if (add_form.ldrOn == null) {
          ElMessage.error("请选择光敏电阻功能开关");
          return;
        }
      } else {
        if (!add_form.delayOff) {
          ElMessage.error("请输入红外关机与继电器间隔");
          return;
        } else if (!add_form.nobodyTime) {
          ElMessage.error("请输入人体红外无人延时时间");
          return;
        }
        if (!add_form.acRunMA) {
          ElMessage.error("请输入启停探测阈值");
          return;
        } else if (!add_form.autoInterval) {
          ElMessage.error("请输入自控采集间隔");
          return;
        } else if (add_form.beepOn == null) {
          ElMessage.error("请选择蜂鸣器功能开关");
          return;
        } else if (add_form.ldrOn == null) {
          ElMessage.error("请选择光敏电阻功能开关");
          return;
        }
      }
      context.emit("handleclick", add_form, editVisible.value);
    };
    const listModelByBrand = ref([]);
    const handlebrand = (res) => {
      listModelByBrand.value = [];
      modeBrand.value = "";
      getlistModelByBrand(res);
    };
    const getlistModelByBrand = (res) => {
      api
        .getListAPI("backup/airCondition/listModelByBrand", {
          brandId: res,
        })
        .then((res) => {
          if (res.data.code == 1) {
            listModelByBrand.value = res.data.data;
          } else {
            ElMessage.error(res.data.message);
          }
          //数据处理
        })
        .catch((err) => {
          console.log(err);
        });
    };
    const brandList = ref([]);
    const getlistBrand = () => {
      api
        .getListAPI("backup/airCondition/listBrand", {})
        .then((res) => {
          if (res.data.code == 1) {
            brandList.value = res.data.data;
          } else {
            ElMessage.error(res.data.message);
          }
          //数据处理
        })
        .catch((err) => {
          console.log(err);
        });
    };
    getlistBrand();
    const handleModelByBrand = (res) => {
      for (var i = 0; i < listModelByBrand.value.length; i++) {
        if (res == listModelByBrand.value[i].id) {
          add_form.modelId = listModelByBrand.value[i].modelCode;
        }
      }
    };
    return {
      proxy,
      is_admin,
      editVisible,
      add_form,
      CtlTemperature,
      SeasonalSwitch,
      Modelld_radio,
      brandList,
      listModelByBrand,
      brandId,
      modeBrand,
      switchList: [
        {
          value: 1,
          label: "开启",
        },
        {
          value: 0,
          label: "关闭",
        },
      ],
      pattern: [
        {
          value: 0,
          label: "自动",
        },
        {
          value: 1,
          label: "手动",
        },
      ],
      handleclick,
      handleclose,
      handlebrand,
      handleModelByBrand,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/common.css";
@import "../assets/css/device.less";
.el-input {
  width: 215px;
}
&:deep(.el-dialog) {
  background: #fff;
}
.reminder {
  color: #999;
  font-size: 16px;
  margin-left: 10px;
}
.displayflex {
  display: flex;
}
// &:deep(.el-overlay){
//   z-index:999 !important;
// }
</style>
